@extends('admin.common.common')

@section('head')

    <link rel="stylesheet" href="/webuploade/webuploader.css">
@endsection


@section('body')

    <article class="page-container">

        <form class="form form-horizontal" action="{{route('admin.fangowner.store')}}" method="post" enctype="multipart/form-data">
            @csrf
            @if ($errors->any())
                <div class="Huialert-error Huialert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东姓名：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder=""  name="name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证号码：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder=""  name="card">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>身份证照片：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <div id="uploader-demo">
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                        <div id="fileShow">

                        </div>
                        <input type="hidden" id="pic" name="pic">
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>年龄：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" name="age" id="age">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" id="sex-1" value="0" checked>
                        <label for="sex-1" >男</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" value="1" name="sex">
                        <label for="sex-2">女</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>手机：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="phone" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>邮箱：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="@" name="email" id="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>家庭住址：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" name="address" id="address">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>
@endsection


@section('js')

    <script src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script src="/webuploade/webuploader.js"></script>

    <script>
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: '/webuploade/Uploader.swf',

            formData:{_token:"{{csrf_token()}}"},
            method:"post",
            // 文件接收服务端。
            server: '{{route('admin.fangowner.localfile')}}',

            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id:'#filePicker',
                //是否开启多个文件的能力
                multiple:true,
            },

        });
        uploader.on('uploadSuccess',function (res,pic) {
            // console.log(pic.data.pic);
            var pic = pic.data.pic; //图片路径
            var val = $('#pic').val() //隐藏域的val值
            var tmp = val + '#' + pic   //val值拼接

            $('#pic').val(tmp) //把值赋值给隐藏域

            var img = `
                        <div style="position: relative;width:150px;
display: inline-block">
                        <img src="${pic}" width="150" height="150">
                        <strong onclick="delpic(this,'${pic}')" style="position: absolute;right: 0px; top: 0px;color: white;font-size: 20px;">x</strong>
</div>`

            $('#fileShow').append(img) //追加图片到div
        })

        /**
         * 删除添加图片
         * @param res
         * @param pic
         */
        function delpic(res,pic){
            console.log(pic)
            $(res).parent().remove();//移除当前图片
            var picVal = $('#pic').val()  //获取当前隐藏域的值
            var val = picVal.replace(`#${pic}`,''); //当前图片路径复制为空

            $('#pic').val(val) //重新给隐藏域赋值

            //Ajax请求
            $.ajax({
                url:"{{route('admin.fangowner.delpic')}}",
                data:{pic:pic,_token:"{{csrf_token()}}"},
                type:'delete',
                success:res=>{
                    console.log(res)
                    if(res.error_code == 0){
                        layer.msg(res.msg,{icon:1,time:1000})
                    }else{
                        layer.msg(res.msg,{icon:5,time:1000})
                    }
                }
            })


        }

    </script>
@endsection
